<script lang="ts" setup>
import { Page } from '@vben/common-ui';

import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  renderEcharts({
    title: {
      text: '离岗次数',
      
    },
    legend: {
      data: ['次数'],
    },
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      // top: '2 %',
    },
    series: [
      {
        name: '次数',
        barMaxWidth: 80,
        color: '#4f69fd',
        data: [4, 4, 3, 6, 3, 4, 3, 6, 9],
        type: 'bar',
        label: {
          show: true,
          color: 'white', // 浅色背景用白色文字
        },
      },
    ],
    tooltip: {
      axisPointer: {
        lineStyle: {
          // color: '#4f69fd',
          width: 1,
        },
      },
      trigger: 'axis',
    },
    xAxis: {
      data: [
        '1小时',
        '2小时',
        '3小时',
        '4小时',
        '5小时',
        '6小时',
        '7小时',
        '8小时',
        '8小时以上',
      ],
      type: 'category',
    },
    yAxis: {
      // max: 8000,
      splitNumber: 4,
      type: 'value',
    },
  });
});
</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">离岗次数</span>
          </div>
        </template>
        <EchartsUI ref="chartRef" />
      </Card>
    </div>
  </Page>
</template>
